<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入行程</title>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<style>
    .page4-box{
        padding: 12px 16px;
    }
    .query-box{
        padding:20px 20px 10px 20px ;
        /*padding-top:20px;*/
        border: 1px solid #e6e6e6;
        min-height: 45px;
    }
    .selected_trip{
        border: 1px solid #e6e6e6;
    }
    .tripspan{
        margin-left: 40px;
        margin-right: 30px;
    }
    .tripspan span{
        line-height: 38px;
        background: #00a0e9;
        padding: 5px;
        border-radius: 10px;
        color: #fff;
    }
    /*上一步下一步按钮居中*/
    .butcent{
        position: absolute;
        bottom: 20px;
        left: 40%;
        margin-left: 30%;
        width:20%;
        /*margin: 30px;*/
        padding: 30px;
    }

    .butcent2{
        margin-left: 70%;
        width:20%;
        padding: 30px;
    }
    .travel_list{
        height:200px;
        margin-left: 30px;
        margin-right: 30px;
        overflow-y: scroll;
    }
    .travel_tit{
        margin-left: 30px;
        margin-right: 30px;
    }
    .layui-table thead tr{
        background: #e6e6e6;
    }
    .lay-ext-mulitsel{
        display: inline-block;
    }
</style>
<body>
<div>
    <div class="page4 ">
        <div class="page4-box">
            <div class="layui-form-item query-box">
                <form class="layui-form" method="post" id="tripimport" >
                    <input name="tripids" id="tripids" type="hidden" value="">
                    <input name="productids" id="productids" type="hidden" value="">
                    <input name="trip_id" type="hidden" value="{$_GET['id']}">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="padding: 4px 4px;height: 38px;line-height: 30px " >关键字：</label>
                        <input type="text" class="ms-choice keywords layui-input" id="keywords"  placeholder="请输入" style="width: 200px;" autocomplete="off">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="padding: 4px 4px;height: 38px;line-height: 30px">城市：</label>
                        <div class="tag" id="tag_ids2">
                        </div>
                    </div>
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal layui-btn-xs" id="querypoi" style="float: right;margin-right: 27px">查询</button>
                    </div>
                </form>
            </div>
            <div class="selected_trip">
                <div class="layui-form-item">
                    <label class="layui-form-label ">已选行程:</label>
                    <div class="layui-inline tripspan">

                    </div>
                </div>
                <!--表格-->
                <div class="travel_tit">
                    <table>
                        <colgroup>
                            <col width="300">
                            <col width="150">
                            <col width="150">
                            <col width="150">
                            <col width="70">

                        </colgroup>
                        <thead>
                        <tr>
                            <th>案例名称</th>
                            <th>案例ID</th>
                            <th>案例天数</th>
                            <th>案例人数</th>
                            <th width="30px">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="travel_list">
                    <table class="layui-table" lay-size="sm" lay-filter="dataTable" id="layui_table_id">
                        <colgroup>
                            <col width="300">
                            <col width="150">
                            <col width="150">
                            <col width="150">
                            <col width="70">
                        </colgroup>
                        <tbody class="tbodyclass">
                        <tr >

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <div class="butcent2">
            <button class="layui-btn"  lay-filter="" id="importType"> 提交</button>
        </div>
    </div>
</div>
</body>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    var tagData = {$cityJson};

    layui.config({
        base : '__PUBLIC__/'
    }).extend({
        selectM: './multiple/selectM',
    }).use(['layer','form','jquery','selectM','laydate','table'],function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            selectM = layui.selectM,
            laydate = layui.laydate,
            table = layui.table;
        laydate.render({     //创建时间选择框
            elem: '#start_go_time' //指定元素
            , format: 'yyyy-MM-dd'
            ,trigger:'click'
        });

        //多选标签-所有配置
        var tagIns2 = selectM({
            elem: '#tag_ids2' //元素容器【必填】
            ,data: tagData //候选数据【必填】
            ,selected: []      //默认值
            ,max : 5    //最多选中个数，默认5
            ,name: 'tag2'  //input的name 不设置与选择器相同(去#.)
            ,delimiter: ','    //值的分隔符
            ,field: {idName:'id',titleName:'name'}   //候选项数据的键名
        });

        //查询按钮
        $("#querypoi").click(function(){
            var title= $('#keywords').val() ;//input关键字
            var citys=$("input[name='tag2']").attr("value");

            $.ajax({
                url:"{:url('admin/product/getTripForImport')}",
                data:{title:title,citys:citys},
                type:'post',
                async: false,
                success:function(res) {
                    //数据插入表格
                    var html='';
                    for(var i=0;i<res.length;i++){
                        html+='<tr><td>'+res[i]["name"]+'</td>'
                        html+='<td>'+res[i]["id"]+'</td>'
                        html+='<td>'+res[i]["days"]+'</td>'
                        html+='<td>'+res[i]["people"]+'</td>'
                        html+='<td><button class="layui-btn layui-btn-normal layui-btn-sm choosePoi" id="addtrips"  data-name="'+res[i]["name"]+'" data-tid="'+res[i]["use_type"]+'"  data-id="'+res[i]["id"]+'">选择</button></td></tr>'
                    }
                    $('.tbodyclass').html(html);
                    return false;
                }
            })
            return false;
        })

        //   添加行程按钮 addtrips
        $('body').on('click','#addtrips',function () {
            var tripid= $(this).attr("data-id");
            var use_type= $(this).attr("data-tid");
            var tripname= $(this).attr("data-name");
            var tripids;
            // 1产品 2定制
            if(use_type==1){
                tripids=$("#productids").val();
            }else{
                tripids=$("#tripids").val();
            }
            var ids=tripids.split(",");
            for(var i=0 ; i < ids.length; i++){
                if(tripid==ids[i]){
                    layer.msg("不能重复添加行程");
                    return false;
                }
            }
            var tripspan='<span class="deltripspan" data-tid="'+use_type+'" data-id="'+tripid+'" style="margin: 5px 10px">'+tripname+'<i class="layui-icon"></i></span>';

            if(!tripids){
                tripids+=tripid;
            }else{
                tripids+=','+tripid;
            }

            $(".tripspan").append(tripspan);
            if(use_type==1){
                $("#productids").val(tripids);
            }else{
                $("#tripids").val(tripids);
            }
        });

        //  导入模板的提交按钮
        $('#importType').click(function () {
            var trip_id=$("input[name=trip_id]").val()
            if(trip_id=="" || trip_id==undefined){
                layer.msg("导入失败，请刷新后重试");return false;
            }
            $.ajax({
                url:"{:url('/admin/product/productimport')}",
                data:$('#tripimport').serialize(),
                type:'post',
                async: false,
                success:function(res) {
                    var id = res.data;
                    parent.$("#tripid").attr("value",id);
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        },1500)
                    }
                }
            })
        });

        //删除已选行程
        $('body').on('click','.deltripspan',function () {
            var dataid=$(this).attr("data-id");
            var use_type=$(this).attr("data-tid");
            var tripids;
            if(use_type==1){
                tripids=$("#productids").val();
            }else{
                tripids=$("#tripids").val();
            }
            var ids=tripids.split(",");
            var newid="";
            for(var i=0 ; i < ids.length; i++){
                if(ids[i]&&dataid!=ids[i]){
                    if(!newid){
                        newid+=ids[i];
                    }else{
                        newid+=","+ids[i];
                    }
                }
            }
            if(use_type==1){
                $("#productids").val(newid);
            }else{
                $("#tripids").val(newid);
            }
            $(this).remove();
        })


    })
</script>
</html>